<template>
  <div class="article-detail">
    <div class="container">
      <div class="content">
<!--        <video :src="form.url"></video>-->
        <div class="xg-video" id="xgplayer1"></div>
        <div class="video-title">{{ form.title }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';

import {getVideoDetail} from '@/api/article'
import {initWechatSDK} from "@/utils/wechat";

export default {
  name: 'VideoDetail',
  data() {
    return {
      product: {},
      showDetail: false,
      showSpecs: false,
      loading: false,
      contentId: this.$route.params.id || null,
      form: {},
      player: null
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      if (!this.contentId) {
        return
      }
      let data = await getVideoDetail({vid: this.contentId})
      this.form = data.data
      await this.initWechatShare()

      console.log(this.form)
      this.player = new Player({
        id: 'xgplayer1',
        url: this.form.url,
        width: '100%',
        height: '85%',
        controls: false,
        videoInit: true,
        playsinline: true,
      });
    },
    async initWechatShare() {
      try {
        await initWechatSDK({
          shareConfig: {
            title: this.form.title,
            desc: '新华新消费',
            link: window.location.href,
            imgUrl: 'https://xinxf.oss-cn-hangzhou.aliyuncs.com/resources/logo.png'
          }
        })
        console.log('微信分享功能已初始化')
      } catch (error) {
        console.error('初始化微信分享失败:', error)
      }
    }
  }
}

</script>
<style scoped lang="scss">
.article-detail {
  width: 100%;
  height: 100%;
  background: #000000;
}
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .content {
    width: 100%;
    height: 100%;
  }

  .video-title {
    padding: 0 15px;
    font-size: 13px;
    color: #ffffff;
    line-height: 18px;
    text-align:justify;
  }
}
</style>